
<template>
	<transition name="m-message-fade">
		<div v-show="visible" 
			:class="className"
			:style="{
				top: top+'px',
				zIndex: zIndex
			}">{{message}}</div>
	</transition>
  
</template>

<script setup>
	import { reactive, ref, computed, watch, toRefs, onMounted } from 'vue'
	import types from "./types";

	const props = defineProps({
		type: {
			type: String,
			default: 'message',
			validator(value) {
				return Object.values(types).includes(value)
			}
		},
		message: {
			type: String,
			default: ''
		}
	})

	const _d = reactive({
		visible: false,
		top: 20,
		zIndex: 1000
	})
	const {visible, top, zIndex} = toRefs(_d);

	const className = computed(() => ['m-message', props.type]);

	const setVisible = (val) => {
		return new Promise((resolve, reject) => {
			_d.visible = val ? true : false;
			setTimeout(() => {
				resolve();
			}, 300);
		})
	}

	const setTop = (idx) => {
		_d.top = idx * (48+20) + 20;
	}

	defineExpose({
		setVisible,
		setTop,
	})

</script>

<style scoped>
.m-message {
	position: fixed;
	top: 20px;
	left: 50%;
	z-index: 999;
	padding: 14px 20px;
	width: 380px;
	height: 48px;
	line-height: 20px;
	box-sizing: border-box;
	transition: top .3s ease-out;
}
.m-message.success {
	background: #f0f9eb;
	color: #529b2e;
}
.m-message.warning {
	background: #fdf6ec;
	color: #b88230;
}
.m-message.message {
	background: #f4f4f5;
	color: #73767a;
}
.m-message.error {
	background: #fef0f0;
	color: #c45656;
}


.m-message-fade-enter-from, .m-message-fade-leave-to {
	transform: translateY(-20px);
	opacity: 0;
}
.m-message-fade-enter-active {
	transition: all .3s ease-in;
}
.m-message-fade-leave-active {
	transition: all .3s ease-out;
}

</style>